webpack - css兼容性处理

本章主要用：

• postcss-loader：转换CSS的工具；
• postcss-preset-env：帮助postcss找到browserslist（一般在package.json下），通过配置加载指定的css兼容样式；

安装：

npm install postcss-loader@^3.0.0 postcss-preset-env@^6.7.0 -D

然后在webpack.config.js中配置

// postcss loader 配置提取
const postcssLoaderConfig = {
  loader: 'postcss-loader',
  options:{
    ident: 'postcss',
    plugins: () => [
      require('postcss-preset-env')()
    ]
  }
}

另外， 在package.json中添加browserslist为：

  "browserslist": {
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ],

    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ]
  }

其中：

• development ：表示开发环境下，last 1 chrome version表示支持最新的chrom版本 ，其余类似；
• production：表示生产环境，默认是生产环境，>0.2%表示可以支持大于市场98.8%的浏览器；not dead不支持已经死掉的浏览器；not op_mini all不支持所有的opera-mini的所有浏览器；

在src/css/index.css文件中，添加一个display:flex;属性

#box {
  display: flex;
}

构建项目，可以看到dist/css/bunlde.css文件中，自动多了webkit-flex

browserslist 默认是生产环境，如果要测试测试环境

可以通过在webpack.config.js中加入

process.env.NODE_ENV = "development";

可以直接尝试下，看还会不会有webkit-flex。。。

本章结束！